<template>
    <div class="case-view" :class="{ black: key == 'url' }">
        <iframe :src="detail[key]" v-if="type == 'iframe'"></iframe>
        <img :src="detail[key]" v-else-if="type == 'image'" />
        <video
            :src="detail[key]"
            autoplay
            :muted="false"
            v-else-if="type == 'video'"
            controls
        ></video>
    </div>
    <div class="watermark"></div>
</template>
<script setup>
import { useContent } from "./index.js";
const route = useRoute();
const key = route.query.key || "url";
const { type, detail, GetDetail } = useContent(key);

onMounted(async () => {
    await nextTick();
    await GetDetail();

    useSeoMeta({
        title: detail.value.name + "_北京华锐云空间",
    });
});
</script>
<style lang="scss" scoped>
.case-view {
    position: relative;
    width: 100%;
    height: 100%;

    &.black {
        background-color: #000;
    }

    iframe {
        width: 100%;
        height: 100%;
        border: none;
        /* 防止用户拖动 */
        position: fixed;
        top: 0;
        left: 0;
        /* 防止页面滚动 */
        overflow: hidden;
    }

    img {
        position: absolute;
        left: 50%;
        top: 50%;
        max-width: 100%;
        transform: translate(-50%, -50%);
    }

    video {
        display: block;
        width: 100%;
        height: 100%;
    }
}

.watermark {
    width: 100vw;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 999;
    background: url("https://yzpt-resources.oss-cn-hangzhou.aliyuncs.com/web/images/watermark-3.png")
        left top;
    background-size: cover;
    pointer-events: none;
}
</style>
